import React from 'react'
import { Button, Col, Form, Input, Row } from 'antd'

function PageHeader({ handleOk }) {
  const [form] = Form.useForm()

  const onOk = (data) => {
    handleOk(Object.assign({}, data))
    form.setFieldsValue({ name: '' })
  }

  return (
    <div className="todo-header">
      <Form form={form} onFinish={onOk}>
        <Row>
          <Col span={18}>
            <Form.Item
              label="代办事项"
              name="name"
              rules={[{ required: true, message: '请输入导航名称!' }]}
            >
              <Input autoComplete="off" placeholder="请输入导航名称" />
            </Form.Item>
          </Col>
          <Col span={4} offset={2}>
            <Form.Item>
              <Button style={{ width: '100%' }} htmlType="submit" type="primary">添加到代办</Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </div>
  )
}

export default PageHeader
